<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['技术管理','BOM信息']" currentMenu="BOM详情">
    </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">物料</p>
          <p class="secondary-text">{{ detailInfo.goodsName || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">规格</p>
          <p class="secondary-text">{{ detailInfo.spec || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">基本单位</p>
          <p class="secondary-text">{{ detailInfo.basicUnitText || '-' }}</p>
        </div>
      </div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">物料类型</p>
          <p class="secondary-text">{{ detailInfo.typeText || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">分类</p>
          <p class="secondary-text">{{ detailInfo.categoryText || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">工艺</p>
          <p class="secondary-text">{{ detailInfo.craftName || '-' }}</p>
        </div>
      </div>
    </div>
    <div class="cards-box">
      <a-card title="子物料" :bordered="false" style="margin-top:12px">
        <!-- <div class="item-wrap"> -->
        <a-table
          size="middle"
          :scroll="{ x: mainDivWidth - 72, y: 500 }"
          rowKey="id"
          :columns="columns"
          :dataSource="bomList"
          :pagination="ipagination"
          class="j-table-force-nowrap"
        >
          <!-- <template slot="monthStr" slot-scope="text, record">
            <div>{{ record.monthStr }}月</div>
          </template> -->
        </a-table>
        <!-- </div> -->
      </a-card>
      <a-card title="其他信息" :bordered="false" style="margin-top:12px">
        <div class="item-wrap">
          <div class="detail-item" style="width:100%">
            <p class="subtitle">备注</p>
            <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
          </div>
        </div>
        <div class="item-wrap" style="margin-top:40px">
          <div style="width:100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
        </div>
      </a-card>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { API } from '@/api/requestFzs'
export default {
  data() {
    return {
      jkeForm: {
        title: 'BOM详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      detailInfo: {},
      /* 分页参数 */
      ipagination: {
        current: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数
        pageSizeOptions: ['10'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + '条 ' + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        // hideOnSinglePage: true,
        onShowSizeChange: (current, pageSize) => {
          this.ipagination.current = 1;
          this.ipagination.defaultPageSize = pageSize;
          this.getBomList(); //显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.ipagination.current = current;
          this.ipagination.defaultPageSize = size;
          this.getBomList();
        },
      },
      // 表头
      columns: [
        {
          title: '物料',
          align: 'left',
          dataIndex: 'goodsName',
          ellipsis: true,
          scopedSlots: { customRender: 'goodsName' }
        },
        {
          title: '规格',
          align: 'left',
          dataIndex: 'goodSpec',
          ellipsis: true,
          scopedSlots: { customRender: 'goodSpec' }
        },
        {
          title: '物料类型',
          align: 'left',
          dataIndex: 'goodsTypeName',
          ellipsis: true,
          scopedSlots: { customRender: 'goodsTypeName' }
        },
        {
          title: '基本单位',
          align: 'left',
          dataIndex: 'goodsBasicUnitText',
          ellipsis: true,
          scopedSlots: { customRender: 'goodsBasicUnitText' }
        },
        {
          title: '基础用量',
          align: 'left',
          dataIndex: 'basicUseLevel',
          ellipsis: true,
          scopedSlots: { customRender: 'basicUseLevel' }
        },
        {
          title: '损耗(%)',
          align: 'left',
          dataIndex: 'loss',
          ellipsis: true,
          scopedSlots: { customRender: 'loss' }
        },
      ],
      // 表数据
      bomList: []
    }
  },
  components: {
    crumbs,
    FileDetail,
  },
  computed: {
    mainDivWidth() {
      let mainDiv = document.querySelector('.ant-layout-content')//ant-layout-content
      return `${mainDiv.clientWidth}px`
    }
  },
  methods: {
    /* 面包屑返回 */
    goBack() {
      this.$router.go(-1)
    },
    initDetail(id) {
      this.jkeForm.visible = true
      API.messBomInfoQueryById(id).then(res => {
        if (res.code == 200) {
          this.detailInfo = res.result
          this.getBomList()
        }
      })
    },
    getBomList() {
      let parameter = {
        bomId: this.detailInfo.id,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.defaultPageSize
      }
      API.queryBomListByBomId(parameter).then(res => {
        if (res.code == 200) {
          this.bomList = res.result.records
          this.ipagination.total = res.result.total
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n+3) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 240px);
  overflow-y: scroll;
}
</style>
